<template>
  <div>
    <!-- 顶部 -->
    <van-nav-bar
      title="黑马头条"
      :fixed="false"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="main-wrap">
      <!-- 文章标题 -->
      <h1 class="article-title">{{ Detail.title }}</h1>
      <van-cell-group :border="false">
        <!-- 作者头像 -->
        <van-image :src="Detail.aut_photo" />
        <!--  -->
        <van-cell>
          <!-- 作者名称及发布时间 -->
          <template #title>
            <div class="user-name">{{ Detail.aut_name }}</div>
            <div class="publish-date">{{ Detail.pubdate }}</div>
          </template>
        </van-cell>

        <van-button
          round
          size="small"
          type="info"
          @click="getfollowing"
          :class="{ isFollowed: Detail.is_followed }"
        >
          <van-icon v-if="!Detail.is_followed" name="plus" />
          <span>{{ Detail.is_followed ? '已关注' : '关注' }}</span>
        </van-button>
      </van-cell-group>

      <!-- 内容 -->
      <div v-html="Detail.content" class="markdown-body"></div>

      <!-- 分割线 -->
      <van-divider>正文结束</van-divider>

      <!-- 评论列表 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
      >
        <van-cell
          class="comment-item"
          v-for="item in Commentslist"
          :key="item.com_id"
        >
          <template #icon>
            <van-image round :src="item.aut_photo" />
          </template>
          <template #title>
            <div class="comment-title">
              <div class="user-name">{{ item.aut_name }}</div>
              <van-button class="like-btn" icon="good-job-o" size="mini">
                赞
              </van-button>
            </div>
            <div class="comment-content">{{ item.content }}</div>
            <div class="comment-bottom">
              <span>{{ item.pubdate }}</span>
              <van-button round class="reply-btn" @click="showPopup2(item)">
                回复{{ item.reply_count }}
              </van-button>
            </div>
          </template>
        </van-cell>
      </van-list>

      <!-- 底部标签栏 -->
      <div class="article-bottom">
        <van-button round @click="showPopup">写评论</van-button>
        <!-- 弹框 -->
        <van-popup v-model="show" position="bottom" :style="{ height: '18%' }">
          <!-- 显示内容 -->
          <div class="comment-post">
            <van-field
              v-model="message"
              rows="2"
              autosize
              type="textarea"
              maxlength="50"
              placeholder="请输入留言"
              show-word-limit
            />
            <van-button
              type="info"
              size="mini"
              class="btntn"
              @click="AddcommentsAPI"
              >发布</van-button
            >
          </div>
        </van-popup>
        <van-icon name="comment-o" :badge="Detail.comm_count" />
        <van-icon
          name="star-o"
          :class="{ isCollect: Detail.is_collected }"
          @click="changeCollect"
        />
        <van-icon
          name="good-job-o"
          :class="{ isLikings: Detail.is_likings }"
          @click="getlikings"
        />
        <van-icon name="share" class="icon-color" />
      </div>
    </div>

    回复评论弹层
    <van-popup
      v-model="show2"
      position="bottom"
      :style="{ height: '100%', width: '100%' }"
      class="show2Comments"
    >
      <ReplyComments
        class="show2Commentss"
        :item="item"
        :id="id"
      ></ReplyComments>
    </van-popup>
  </div>
</template>

<script>
import 'github-markdown-css'
import {
  getDetailAPI,
  getCommentsAPI,
  getFollowingsAPI,
  DeleteFollowingAPI,
  getLikingsAPI,
  DelectlikingsAPI,
  getCollectionsAPI,
  DelectcollectionsAPI,
  AddCommentsAPI
} from '@/api'
import ReplyComments from './components/ReplyComments.vue'
export default {
  components: { ReplyComments },
  name: 'Detail',
  data() {
    return {
      Detail: {},
      Commentslist: [],
      replyToComment: {},
      loading: false,
      finished: false,
      show: false,
      show2: false,
      error: false,
      item: '',
      id: '',
      message: '',
      params: {
        type: 'a',
        source: this.$route.params.id,
        offset: '',
        limit: 10
      }
    }
  },
  created() {
    this.getDetailAPI()
    this.getCommentsAPI()
  },
  methods: {
    //? 文章详情
    async getDetailAPI() {
      const { data } = await getDetailAPI(this.$route.params.id)
      this.Detail = data.data
      console.log(this.Detail)
    },

    //? 获取评论列表
    async getCommentsAPI() {
      const { data } = await getCommentsAPI(this.params)
      this.Commentslist = data.data.results
      this.params.offset = data.data.last_id
      // console.log(data)
      console.log(this.Commentslist)
    },

    //? 滚动加载评论列表
    async getcomments() {
      try {
        const { data } = await getCommentsAPI(this.params)
        if (data.data.results.length < 10) {
          //? 数据加载完成
          this.finished = true
        } else {
          this.params.offset = data.data.last_id
          this.Commentslist.push(...data.data.results)
        }
      } catch (error) {
        this.error = true
      } finally {
        this.loading = false
      }
    },

    //? 异步更新数据
    onLoad() {
      this.getcomments()
    },

    //? 关注用户
    async getfollowing() {
      if (this.Detail.is_followed) {
        //? 取消关注
        await DeleteFollowingAPI(this.Detail.aut_id)
        this.$toast.success('已取消关注!')
      } else {
        const data = {
          target: this.Detail.aut_id
        }
        await getFollowingsAPI(data)
        this.$toast.success('关注成功!')
      }
      this.getDetailAPI()
    },

    //? 是否点赞
    async getlikings() {
      if (this.Detail.is_likings) {
        await DelectlikingsAPI(this.Detail.art_id)
      } else {
        const data = { target: this.Detail.art_id }
        await getLikingsAPI(data)
      }
      this.getDetailAPI()
    },

    //? 是否收藏
    async changeCollect() {
      if (this.Detail.is_collected) {
        await DelectcollectionsAPI(this.Detail.art_id)
        this.$toast.success('已取消收藏!')
      } else {
        const data = { target: this.Detail.art_id }
        await getCollectionsAPI(data)
        this.$toast.success('收藏成功!')
      }
      this.getDetailAPI()
    },

    //? 添加评论
    async AddcommentsAPI() {
      const data = {
        target: this.Detail.art_id,
        content: this.message
      }
      const list = await AddCommentsAPI(data)
      this.Commentslist.unshift(list.data.data.new_obj)
      console.log(list)
      this.show = false
      this.message = ''
      this.$toast.success('添加评论成功!')
    },
    //? 评论弹窗
    showPopup() {
      this.show = true
    },
    showPopup2(item) {
      this.show2 = true
      console.log(item)
      this.item = item
      this.id = this.Detail.art_id
    }
  }
}
</script>

<style lang="less" scoped>
.main-wrap {
  position: fixed;
  left: 0;
  right: 0;
  top: 1.22667rem;
  bottom: 1.17333rem;
  overflow-y: scroll;
  background-color: #fff;
  .article-title {
    font-size: 0.53333rem;
    padding: 0.66667rem 0.42667rem;
    margin: 0;
    color: #3a3a3a;
    border-bottom: 0.02667rem solid #d8dee4;
  }
  :deep(.van-cell-group) {
    background-color: #fff;
    display: flex;
    padding: 0 0.42667rem;
    -webkit-box-align: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    color: #323233;
    font-size: 0.37333rem;
    line-height: 0.64rem;
    background-color: #fff;
    height: 1.12rem;
    .user-name {
      font-size: 0.32rem;
      color: #3a3a3a;
    }
    .publish-date {
      font-size: 0.30667rem;
      color: #b7b7b7;
    }
  }
  .isFollowed {
    background-color: #fff;
    color: rgb(50, 150, 250);
  }
}
:deep(.van-button--small) {
  width: 3.306rem;
  height: 0.77333rem;
}
:deep(.van-cell) {
  padding: 0;
}
:deep(.van-image) {
  width: 1.376rem;
  height: 0.93211rem;
  margin-right: 0.22667rem;
  overflow: hidden;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  :deep(.van-cell) {
    padding: 0;
  }
}
.article-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  height: 1.17333rem;
  border-top: 0.01333rem solid #d8d8d8;
  background-color: #fff;
  :deep(.van-button--normal) {
    width: 3.76rem;
    height: 0.61333rem;
    border: 0.02667rem solid #eee;
    font-size: 0.4rem;
    color: #a7a7a7;
  }
  .van-icon {
    font-size: 0.53333rem;
    // color: rgb(119, 119, 119);
  }
  .isLikings {
    color: red;
  }
  .isCollect {
    color: rgb(255, 150, 50);
  }
}

// 评论
:deep(.comment-item) {
  padding: 0.26667rem 0.42667rem;
  .van-image {
    width: 0.96rem;
    height: 0.96rem;
    margin-right: 0.33333rem;
  }
  .comment-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .user-name {
      color: #406599;
      font-size: 0.34667rem;
    }
    .like-btn {
      height: 0.4rem;
      padding: 0;
      border: none;
      font-size: 0.25333rem;
      line-height: 0.4rem;
      margin-right: 0.09333rem;
      .van-icon-good-job-o:before {
        font-size: 0.4rem;
      }
      .van-button--default {
        border: 0;
      }
    }
  }
  .comment-content {
    font-size: 0.42667rem;
    color: #222;
    margin: 0.4rem 0;
  }
  .comment-bottom {
    display: flex;
    align-items: center;
    // color: #969799;
    font-size: 0.32rem;
    line-height: 0.48rem;
    span {
      display: inline-block;
      font-size: 0.25333rem;
      color: #222;
      margin-right: 0.33333rem;
      line-height: 0.25333rem;
    }
    .reply-btn {
      width: 1.8rem;
      height: 0.64rem;
      line-height: 0.64rem;
      font-size: 0.28rem;
      color: #222;
      span {
        margin-right: 0;
      }
    }
  }
}
:deep(.comment-post) {
  display: flex;
  align-items: center;
  padding: 0.42667rem 0 0.42667rem 0.42667rem;
  .van-cell {
    position: relative;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 0.26667rem 0.42667rem;
    overflow: hidden;
    color: #323233;
    font-size: 0.37333rem;
    line-height: 0.64rem;
    background-color: #f5f7f9;
    .van-field__control {
      display: block;
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      margin: 0;
      padding: 0;
      color: #323233;
      line-height: inherit;
      text-align: left;
      background-color: transparent;
      border: 0;
      resize: none;
    }
  }
  .btntn {
    width: 2rem;
    border: none;
    padding: 0;
    color: #6ba3d8;
    background-color: #fff;
    font-size: 0.3733rem;
  }
}

:deep(.show2Comments) {
  .show2Commentss {
    z-index: 99;
  }
}
</style>
